<template>
  <div class="table-box">
    <el-form ref="form" :model="form" label-width="120px">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="客户信息" name="1">

          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="选择客户">
                <el-col :span="20">
                  <template>
                    <el-select v-model="form.client_id" multiple filterable @change="aa()" remote reserve-keyword
                      placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
                      <el-option v-for="item in options" :key="item.value" @clieck="alert(1)" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-col>

          合同基础信息
          <br>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="合同名称">
                <el-col :span="20">
                  <el-input v-model="form.title" placeholder="输入合同名称" />
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="业务类型">
                <el-select v-model="form.type1" @change="getTypeList()" placeholder="输选择业务类型">
                  <el-option label="顾问业务" value="顾问业务"></el-option>
                  <el-option label="咨询业务" value="咨询业务"></el-option>
                  <el-option label="鉴证业务" value="鉴证业务"></el-option>
                  <el-option label="代理业务" value="代理业务"></el-option>
                  <el-option label="其他业务" value="其他业务"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="细分业务类型">
                <el-select v-model="form.type2" placeholder="输选择业务类型">
                  <el-option v-for="item in typeList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>

        </el-collapse-item>

        <el-collapse-item title="详细信息" name="2">
          <div>
            <div class="collapse2-titlebox">
              <span class="collapse2-titlebox-t">提示:仅填写当年合同</span>
            </div>
            <div class="collapse2-listbox">
              <br>

              <el-form-item label="选择年份">
                <el-select v-model="form.year" placeholder="选择年份">
                  <el-option label="2023" value="2023"></el-option>
                  <el-option label="2024" value="2024"></el-option>
                  <el-option label="2025" value="2025"></el-option>
                  <el-option label="2026" value="2026"></el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="时间范围">
                <el-date-picker :value-format="'yyyy-MM-dd HH:mm:ss'" v-model="form.time" type="daterange"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>


              <el-form-item label="合同金额">
                <el-col :span="12">
                  <el-input v-model="form.money" placeholder="输入合同金额" />
                </el-col>
              </el-form-item>


              <el-form-item label="联系人">
                <el-col :span="12">

                  <el-input v-model="form.linkman" placeholder="输入联系人" />
                </el-col>

              </el-form-item>

              <el-form-item label="联系电话">
                <el-col :span="12">
                  <el-input v-model="form.phone" placeholder="输入联系电话" />
                </el-col>
              </el-form-item>

              <el-form-item label="文档链接">
                <el-col :span="20">
                  <el-input v-model="form.document_link" placeholder="输入文档链接" />
                </el-col>
              </el-form-item>
            </div>
          </div>
        </el-collapse-item>

        <el-collapse-item title="收费信息" name="3">
          <div>
            <div class="collapse2-titlebox">
              <span class="collapse2-titlebox-t">提示:填写每个收费节点日期与金额</span>
              <div class="collapse2-title-right">
                <span class="jia" @click="clickAdd">+</span>
                <span class="jian" @click="clickMinus">-</span>
              </div>
            </div>
            <br>
            <div class="collapse2-listbox">
              <el-form-item label="选择收费节点">
                <el-select v-model="form.jie" placeholder="选择收费节点">
                  <el-option label="年付" value="年付"></el-option>
                  <el-option label="半年付" value="半年付"></el-option>
                  <el-option label="季付" value="季付"></el-option>
                </el-select>
              </el-form-item>
              <el-table ref="multipleTable" :data="form.tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="eachmoney" label="金额" width="120">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.eachmoney"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="ought_to_money_time" label="时间" width="500">
                  <template slot-scope="scope">
                    <el-date-picker :value-format="'yyyy-MM-dd HH:mm:ss'" v-model="scope.row.ought_to_money_time"
                      type="date" placeholder="选择日期">
                    </el-date-picker>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-collapse-item>



      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="clickConfirm">确 定</el-button>
      <el-button @click="dialogFormVisible = false">取 消</el-button>
    </div>
  </div>
</template>
  
<script>
import contractApi from '@/api/contract'
import clientApi from '@/api/client'

export default {
  data() {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [],


      activeNames: ['1', '2', '3'],
      restaurants: [],
      state: '',
      timeout: null,

      typeList: [],

      form: {
        time: '',
        infoList:[],
        tableData: [
          { eachmoney: '', ought_to_money_time: '' }
        ],
      },

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: '',
    };
  },
  methods: {
    aa() {
      alert('展示客户基本信息')
    },
    // 点击弹窗确定按钮
    clickConfirm() {

      const that = this;
      const p = {
        // .. 参数
      }

      // var formData={this.tableData,this.form};

      // const loading = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'body',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });

      console.log(this.form);
      contractApi.clientFrom(this.form).then(response => {
        this.$message({
          message: response.message,
          type: 'success'
        });
        that.dialogFormVisible = false;

        this.$router.push('/contract/contractIndex')
      }).catch(e => {
        loading.close();
        console.log(e)
      })

    },

    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    getTypeList() {
      let self = this;
      contractApi.getTypeList(self.form.type1).then(response => {
        this.typeList = response.data.list;
      })
    },

    loadAll() {
      clientApi.getAllClient().then(response => {
        this.list = response.data.list.map(item => {
          return { value: `${item['id']}`, label: `${item['name']}` };
        });
      })
    },


    handleChange(val) {
      // console.log(val);
    },
    // 添加联系人--选中功能
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击增加
    clickAdd() {
      const tableData = this.form.tableData;
      tableData.push({
        name: '',
        appellation: '',
      })
      this.form.tableData = tableData;
    },
    // 点击减号
    clickMinus() {
      const tableData = this.form.tableData;
      if (tableData.length == 1) {
        return
      } else {
        tableData.pop()
      }
      this.form.tableData = tableData;
    },
  },
  created() {
    var query = this.$route.query;
    if (query.id) {
      contractApi.getInfo(query.id).then(response => {
        this.form = response.data.info;
      })
      // clientApi.getDetailClientInfo(query.id).then(response => {
      //   this.form = response.data.info;
      // })
    }
  },
  mounted() {
    this.loadAll();
  }
};
</script>
  
<style>
.table-box {
  width: 100%;
  height: 1500px;
  background: #FFFFFF;
  box-shadow: 0px 1px 16px 0px rgba(202, 204, 204, 0.65);
  border-radius: 4px;
  padding: 50px 16px 16px 100px;
}

.collapse2-titlebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collapse2-titlebox-t {
  font-size: 12px;
  color: #666;
}

.collapse2-title-right {
  display: flex;
  align-items: center;
}

.collapse2-title-right>span {
  font-size: 15px;
  font-weight: bold;
  margin-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #fff;
  line-height: 1 !important;
  cursor: pointer;
}

.collapse2-title-right>span.jia {
  background: #409eff;
}

.collapse2-title-right>span.jian {
  background: #999;
}

.collapse2-listbox ::v-deep .el-input__inner {
  /* height: 30px; */
  /* line-height: 30px; */
}
</style>